목차
✅
팀원소개
✅
작업내용
✅
코드분석
✅
기능시연
✅
팀원소개
이
건
김나영
장화현
정주은
송영진
오원석
김성경
김세연
팀장
비선실세
✅
일정관리
✅
벤치마킹
✅
작업내용
-
개요
구분
구현
기능
사용
기능
공통
UI
Tiles,
공통빈
회원가입
js, ajax, JQuer
y
로그인
js
, ajax, JQuer
y
정답률
표시
(
차트
)
c3, JQuer
y
문제
풀기
/
채점결과
보기
R
esultMap, ajax
강사
문제
업로드
/
수정
/
삭제
R
esultMap, A
OP
✅
작업내용
-
간단소개
✅
작업내용
-
간단소개
✅
작업내용
-
유스케이스
✅
작업내용
–
DB
설계
✅
코드분석
: UI (tiles /
공통빈
적용
)
■
1.
환경설정
■
web.x
ml __________________________
______________
_________________
______________
______________
______
공통빈
설정
DispatcherServlet
설정
✅
코드분석
: UI (tiles /
공통빈
적용
)
■
2. tiles
설정
■
ko
smo-web.xml _______________
_____________
__________________
_____________
_________________
______________
_
■
tiles-definit
ions.xml ___________________
_________________
______________
______________
_________________
__________
tiles
설정내용이
들어있는
xml
파일
tiles
로
사용할
jsp
파일들
설정
tiles
를
적용할
jsp
파일의
경로
설정
{1} / {2}
는
우선순위를
의미
✅
코드분석
:
로그인
✅
코드분석
:
로그인
✅
코드분석
:
로그인
✅
코드분석
:
로그인
✅
코드분석
:
회원가입
이름
성과
이름을
받아와
합쳐주는
작업
✅
주
/
객관식
문제등록
: UI
과목명
,
문제유형을
라디오버튼으로
생성
문제유형에
따라
양식이
변경되도록
처리
정답을
hidden
으로
숨겨두고
,
객관식의
경우
,
라디오버튼의
value
값에
따라
보기의
값을
가져와
정답에
넣어주고
,
주관식의
경우
,
정답란에
입력한
내용을
정답에
넣어
줌
✅
주
/
객관식
문제등록
:
등록양식
변경
양식
중
구분되는
부분을
각각
<div>
로
나눈
후
,
style="display: non
e
"
해
두고
,
라디오버튼에
onclick
으로
function
을
걸어준다
.
✅
주
/
객관식
문제등록
:
정답
복사
객관식
문제의
경우
,
라디오버튼에
체크된
번호를
가져와
해당
번호의
보기의
t
ext
를
Hidden
으로
숨겨진
정답란에
복사하는
function
-
switch
/case
문을
사용
✅
주
/
객관식
문제등록
:
데이터
저장
Form
에
담아서
데이터를
넘길
때
,
Onsubmit="
return
함수
()"
를
걸어주면
,
Submit
버튼이
작동하기
전에
해당함수를
먼저
실행
후
,
true
가
반환되면
동작함
.
미입력값이
있는
경우
,
Aler
t
으로
경고창
실행하고
,
Confirm
으로
확인창
실행하여
진행의사확인
✅
주
/
객관식
문제등록
:
데이터
저장
Controller
Dao
Mapper
VO
객체를
받아야
하기
때문에
POST
방식
사용
Ser
vice
단을
거쳐서
dao
의
메서드
호출하여
VO
를
넣어준다
.
처리
후
,
입력폼으로
redir
ect
이동
✅
주
/
객관식
문제
수정
/
삭제
: UI
로그인
시
,
회원번호를
sessionUsernum
변수로
저장해
두고
,
본인이
등록한
문제리스트를
호출
ForEach
문으로
리스트
출력하면서
각
수정
,
삭제
버튼에
해당
문제번호
부여
수정버튼
클릭
시
,
수정페이지로
이동
삭제버튼
클릭
시
,
바로
삭제
과목별로
10
문제
세트가
완성되어
회차가
업데이트된
문제의
경우
,
문제수정
및
삭제
리스트에서
제외
✅
주
/
객관식
문제
수정
/
삭제
: UI
삭제
버튼에
문제번호를
인자로
받는
function
Contr
oller
에
문제번호를
파라미터로
담아서
넘깁니다
.
Jav
a script
Controller
파라미터는
S
tr
ing
으로
넘어오기
때문에
인자가
int
라면
자료형을
바꿔서
받아
사용해
줍니다
.
돌아갈
페이지가
사용자가
등록한
문제리스트
이므로
,
Session
에
저장해둔
sessionUsernum
을
받아
파라미터로
사용합니다
.
✅
주
/
객관식
문제
수정
:
등록양식
변경
문제
등록폼과
마찬가지로
문제타입
정보에
따라서
양식이
변경되도록
설정
window
.onlo
ad =
function()
을
걸어주면
페이지
dom
객체
생성
후
자동
실행됨
보기
1
번
값이
null
이
아니면
,
객관식
null
이면
주관식
으로
구분하여
Map
에
저장하여
문제번호로
가져온
문제의
항목별
정보와
함께
페이지에
전달
✅
주
/
객관식
문제
수정
:
데이터
저장
로직은
기본적으로
문제등록과
동일
Dao , Mapper
에서
Inser
t
대신
updat
e
사용
✅
코드분석
:
문제입력
문제등록
✅
코드분석
:
문제
등록
(
주
/
객관식
처리
시
-
Ajax
사용
)
SelectBox
의
선택값이
객관식인지
주관식인지
구별
선택값에
따라
받아온
Data
를
tar
get
의
자식태그
(
children()
)
를
삭제
(
remove()
)
후
서버에서
받아온
데이터로
새로
작성
(
html(data)
)
한다
✅
코드분석
:
회차
업데이트
(1
회차
-
>2
회차
)
■
회차업데이트
결과
표시
-
.jsp , controller
한
회차에
30
문제가
들어가면
2
회차로
회차가
업데이트
되고
,
다음으로
들어가는
문제들은
1
회차에
문제가
들어갑니다
.
✅
코드분석
:
회차
업데이트
■
회차업데이트
결과
표시
-
AOP
, mapper
문제입력하기
전
회차
문제갯수를
파악하고
문제를
입력합니다
.
✅
코드분석
:
문제
등록시
회차
자동업데이트
트리거
회차
자동업데이트
코드
트리거
내에서
팔요한
data
를
임시저장소에
저장
트리거
내에서
필요한
data
를
찾는
과정
회차번호가
없을
시
회차번호를
새로
등록
이미
생성된
회차번호가
있을
시
자기과목의
마지막회차번호에서
다음회차로
업데이트
✅
코드분석
:
임시문제게시판
임시게시판에서
수정
및
삭제
가능
✅
코드분석
:
한문제
풀기
Mapper
문제번호를
기준으로
문제의
디테일을
가져옴
반환타입은
문제의
정보를
담는
VO
문제
,
보기
1
번
~4
번
,
정답을
가져옴
모든
정보를
가져옴
디테일을
위한
Mapper
정답
채점을
위한
Mapper
✅
코드분석
:
한문제
풀기
문제번호를
파라미터로
받음
문제번호를
기준으로
해당
문제의
디테일을
가져와서
전송
DB
에
등록될
유저번호를
세션으로
사용
(
로그인
중인
유저가
누구인지
확인
)
유저의
기록에
따라
풀어본
문제인지
확인
✅
코드분석
:
한문제
풀기
주
/
객관식
처리
시
-
Ajax
사용
DB
의
기록
유무에
따라서
메시지를
다르게
출력
✅
코드분석
:
한문제
풀기
Contr
oller
에서
가져온
dlist
로
여러가지
디테일을
뽑기가
가능
과목번호를
기준으로
자신이
푸는
문제가
무슨
문제인지
파악
가능
✅
코드분석
:
한문제
풀기
자신이
푸는
문제의
과목을
확인
가능
선택한
문제의
문제와
보기를
확인
가능
라디오
버튼으로
정답을
선택
R
equir
ed
선언으로
같은
아이디의
라디오
버튼이
반드시
선택
되도록
설정
✅
코드분석
:
한문제
풀기
Hidden
으로
문제번호를
넘기면서
chkPr
ocess
로
POST
방식으로
이동
같은
문제번호를
받기
때문에
해당
페이지
새로고침
과목번호에
따라
과목별로
리스트
따로
출력
✅
코드분석
:
한문제
풀기
문제번호를
기준으로
해당
문제의
정답과
회차를
조회
시험
결과
테이블에
INSER
T
될
정보들을
VO
에
저장
자신이
입력한
답이
정답인지
아닌지
비교해서
시험결과
테이블에
INSERT
✅
코드분석
:
한문제
풀기
후
결과
등록
문제를
푼
유저의
유저번호
푼
문제의
문제번호
푼
문제가
정답인지
아닌지
푼
문제의
회차
번호
설정한
VO
를
저장
✅
코드분석
: 1
회차
문제
풀이
(30
문제
)
■
1.
회차
목록을
표시
–
view
사용
✅
코드분석
: 1
회차
문제
풀이
(30
문제
)
■
2. 30
문제
표시
–
resultMap
사용
■
Contr
oller_______________________
_________________
______________
______________
_
■
Mapper ____________
__________________
_____________
_________________
_________
✅
코드분석
: 1
회차
문제
풀이
(30
문제
)
■
3. 30
문제
답을
전달
–
Jquer
y
,
ajax
사용
답이
30
개
존재하므로
30
개
답을
담는
배열을
선언
라디오버튼의
체크된
값을
30
번
받아온다
배열의
각
인덱스에
넣는다
데이터를
컨트롤러로
넘긴다
.
배열을
ajax
로
넘길
시
필요한
옵션
traditional
✅
코드분석
: 1
회차
문제
풀이
(30
문제
)
■
4. 30
문제
답을
전달
(1)
–
Contr
oller (
자동
채점
/
정답
여부
/
정답률
계산
)
채점
및
데이터
인풋
로직은
1
문제와
동일하다
리스트의
인덱스로
값을
뽑아온다
✅
코드분석
: 1
회차
문제
풀이
(30
문제
)
■
4. 30
문제
답을
전달
(2)
–
Mapper (
자동채점
/
결과
,
정답률을
DB
에
넣기
)
결과를
DB
에
업데이트
정답률
계산
(
함수
사용
)
✅
코드분석
: 1
회차
문제
풀이
(30
문제
)
■
5.
문제
풀이
결과
표시
-
Controller
✅
코드분석
:
차트
(Bar
, Line, Donut)
■
차트
생성시
사전
준비
및
주의사항
C3.css
가
적용되지
않으면
발생하는
오류
✅
코드분석
:
차트
(Bar
, Line, Donut)
■
Bar
차트
Bar or Line
차트에
적합한
JSON
형태
차트에
출력할
데이터
DB -> List
로
저장
JsonArray
에
add :
차트
출력시
V
alue
가
됨
JsonObject
에
(“key” , v
alue) 로
저장
X
축
카테고리로
문제번호
입력
차트에
출력할
데이터
✅
코드분석
:
차트
(Bar
, Line, Donut)
■
Bar
차트
✅
코드분석
:
차트
(Bar
, Line, Donut)
■
Line
차트
Bar or Line
차트에
적합한
JSON
형태
차트에
출력할
데이터
DB -> List
로
저장
차트
출력시
V
alue
JsonObject
에
(“key” , v
alue) 로
저장
X
축
카테고리로
회차번호
입력
차트에
출력할
데이터
✅
코드분석
:
차트
(Bar
, Line, Donut)
■
Line
차트
✅
코드분석
:
차트
(Bar
, Line, Donut)
■
Donut
차트
차트에
출력할
데이터
Donut
모양
차트에
적합한
JSON
형태
필요데이터
추출
Map
에
“key”
: value로
저장
map
을
문자열
json object
의
값으로
변경
시켜주는
역할
✅
코드분석
:
차트
(Bar
, Line, Donut)
■
Donut
차트
System.
out
.println
("
고생많으셨습니다🤗
"
);